<template>
	<view>
		<!-- 综合 -->
		<view class="all-container">
			<view class="all-top">
				<view class="top-title">
					你可能感兴趣
				</view>
				<view @click="goArtist(item)" class="artist-box" v-for="item,index in all_artists" :key="index">
					<view class="artists-detail">
						<image :src="item.img1v1Url"></image>
						<view class="name-box">
							<view class="name">
								歌手：<span>{{item.name}}</span>
							</view>
							<view class="count">
								<span>粉丝：{{formatCount(item.fansCnt)}}</span>
								<span>歌曲：{{item.musicSize}}</span>
							</view>
						</view>
					</view>
					<view v-if="!item.followed" class="artist-right">
						+ 关注
					</view>
					<view v-if="item.followed" class="artist-right">
						已关注
					</view>
				</view>
			</view>
			<view class="all-center">
				<view class="center-title">
					单曲
				</view>
				<song-list :song_list="all_songs" :nextOrPrevId="nextOrPrevId" @showSongEmit="showSongEmit"
					@lyricEmit="lyricEmit" @isChangeEmit="isChangeEmit" @currentTimeEmit="currentTimeEmit"
					@audioEmit="audioEmit" @currentIndexEmit="currentIndexEmit" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search-all",
		props: {
			all_artists: {
				type: Array,
				default: () => {
					return [];
				}
			},
			all_songs: {
				type: Array,
				default: () => {
					return [];
				}
			},
			nextOrPrevId: {
				type: Object,
				default: () => {
					return {};
				}
			},
		},
		data() {
			return {
				showSong: false, //展示歌词
				lyric: '', //歌词
				currentTime: 0, //歌词播放时间
				isChange: false, //是否切歌
				currentIndex: 0, //当前音乐的index
				audio: null,
			};
		},
		methods: {
			goArtist(item) {
				let artist = encodeURIComponent(JSON.stringify(item));
				const url = `/pages/artist/artist?artist=${artist}`;
				this.$navigateTo(url);
			},
			formatCount(count) {
				let cnt = Math.round(count / 10000);
				if (cnt >= 1) return cnt + "万";
				else return count;
			},
			showSongEmit(e) {
				this.showSong = e;
				this.$emit('showSongEmit', this.showSong);
			},
			lyricEmit(e) {
				this.lyric = e;
				this.$emit('lyricEmit', this.lyric);
			},
			isChangeEmit(e) {
				this.isChange = e;
				this.$emit('isChangeEmit', this.isChange);
			},
			currentTimeEmit(e) {
				this.currentTime = e;
				this.$emit('currentTimeEmit', this.currentTime);
			},
			audioEmit(e) {
				this.audio = e;
				this.$emit('audioEmit', this.audio);
			},
			currentIndexEmit(e) {
				this.currentIndex = e;
				this.$emit('currentIndexEmit', this.currentIndex);
			},
		}
	}
</script>

<style lang="scss">
	.all-container {
		width: 95%;
		margin: 20rpx auto;

		.all-top {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx;
			margin: 30rpx 0;

			.top-title {
				font-size: 24rpx;
				color: #bdbdbd;
				margin: 20rpx 0;
				margin-left: 20rpx;
			}

			.artist-box {
				margin: 20rpx;
				display: flex;
				justify-content: space-between;

				.artists-detail {
					display: flex;

					image {
						width: 80rpx;
						height: 80rpx;
						margin: auto 0;
						border-radius: 20rpx;
					}

					.name-box {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						.name {
							font-size: 28rpx;
							color: #333;

							span {
								color: rgba(0, 85, 255, .6);
								font-weight: 600;
							}
						}

						.count {
							font-size: 22rpx;
							color: #909090;

							span {
								margin-right: 10rpx;
							}
						}
					}
				}

				.artist-right {
					width: 100rpx;
					height: 40rpx;
					margin: auto 0;
					margin-right: 20rpx;
					border-radius: 20rpx;
					border: 1px solid #ea0000;
					line-height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					color: #ea0000;
				}
			}
		}

		.all-center {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx;
			margin: 30rpx 0;

			.center-title {
				font-size: 30rpx;
				font-weight: 600;
				margin: 20rpx 0;
				margin-left: 20rpx;
			}
		}
	}
</style>
